import './style.scss';
import { Col, Row, Input, message} from 'antd';
import React, { useEffect, useState } from "react";
import PersonData from '@/pages/DashboardContent/PersonData';
import PlatformData from '@/pages/DashboardContent/PlatformData';
import SixMoney from '@/pages/DashboardContent/SixMoney';
import Sidefunction from './Sidefunction';

import baoshi from '@/assets/icons/baoshi.png';
import jiantou from '@/assets/icons/jiantou.png';
import chargeIcon from '@/assets/icons/charge-icon.png';
import moneyIcon from '@/assets/icons/money-icon.png';
import nftImg from '@/assets/icons/nftimg.png';
import bill from '@/assets/icons/bill.png';
import link from '@/assets/icons/link.png';
import moneyBag from '@/assets/icons/moneyBag.png';
import extract from '@/assets/icons/extract.png';
import rankinglist from '@/assets/icons/rankinglist.png';
import { useNavigate } from 'react-router-dom';
import { get_platform_trade, get_user_trade, get_user_reward, get_user_vip, user_bind_invitation } from '@/utils/mixin.ts'
import jyzl from '@/assets/new/jyzl.png'
import rfhd from '@/assets/new/rfhd.png'
import rfhjl from '@/assets/new/rfhjl.png'

import zjyl from '@/assets/new/zjyl.png'
import fjyl from '@/assets/new/fjyl.png'
import sxfjl from '@/assets/new/sxfjl.png'
import nftjl from '@/assets/new/nftjl.png'

import qwfhzl from '@/assets/new/qwfhzl.png'
import fhdzl from '@/assets/new/fhdzl.png'
import qwzjyl from '@/assets/new/qwzjyl.png'

const DashboardContent = () => {
    const navigate = useNavigate()
    const [platformData, setPlatformData] = useState([{ total_reward: 0, total_share_points: 0, trade_volume: 0 }]); 
    const [trade, setTrade] = useState([]); 
    const [reward, setReward] = useState([]);
    const [referralCode, setReferralCode] = useState([]);
    const [referralCodeValue, setReferralCodeValue] = useState(''); 
    // useEffect 第二个参数为空数组表示仅在组件挂载时执行
    useEffect(() => {
        // 这里是 componentDidMount 的逻辑
        // console.log("Component is mounted");
        // const res = get_platform_trade({currency: 'BNB'})
        
        // 如果有清理逻辑，例如清理定时器，可以在这里添加
        // return () => {
        //   console.log("Component will unmount");
        //   // 清理逻辑
        // };
        const fetchData = async () => {
            try {
                const res = await get_platform_trade({ currency: 'BNB' });
                setPlatformData(res.data);

                const res1 = await get_user_trade({ email: localStorage.getItem('email') });
                setTrade(res1.data);

                const res2 = await get_user_reward({ email: localStorage.getItem('email') });
                setReward(res2.data);

            } catch (error) {
                console.error("Error fetching data:", error);
            }
        };

        fetchData(); // 组件挂载时执行一次

        // 获取vip信息
        get_user_vip({
            email: localStorage.getItem('email')
        }).then((res) => {
            if (res) {
                setReferralCode(res.data.invite_code);
            }
        });
      }, []);  // 空数组表示只在组件挂载时执行

      const toPage = (path) => {
        navigate(path)
    }
    
    const bindingReferralCode = () => {
        if(!referralCodeValue) return
        user_bind_invitation({
            email: localStorage.getItem('email'),
            invite_code: referralCodeValue
        }).then(res=> {
            if (res && res.code == 0) {
                message.success('绑定成功');
                setReferralCodeValue('');
            } else {
                message.error('绑定失败');
            }
        })
    }

    

    const copyToClipboard = (text) => {
        if(!text) return
        const tempInput = document.createElement('input');
        tempInput.value = text;
        document.body.appendChild(tempInput);
        tempInput.select();
        tempInput.setSelectionRange(0, 99999);
        document.execCommand('copy');
        document.body.removeChild(tempInput);
        message.success('复制成功')
      };
    
    return (
        <>
            <Row className="main">
                <Col lg={18} xl={16} className="dashboard-content-container">
                    <div>
                        <PersonData />
                        <Row className="platform-part" gutter={[16, 0]}>
                            <Col xl={8} lg={12}>
                                <PlatformData />
                            </Col>
                            <Col xl={16} lg={12}>
                                <SixMoney />
                            </Col>
                        </Row>
                    </div>
                </Col>

                <Col lg={6} xl={8} className="dashboard-content-right">
                    <Sidefunction />
                </Col>
            </Row>

            <div className="dashboard-content-iphoneMain">
                <div className="iphoneMain_top">
                    <div className="userInfo">
                        <Row>
                            <Col span={10} className="info_left">
                                <Row className="info_left_top">
                                    <Col span={12} className="leftName">
                                        账户
                                    </Col>
                                    <Col span={12} className="leftName_Img">
                                        <div className="vipIcon">
                                            <img src={baoshi} className="vipIcon_baoshi" />
                                            <img src={jiantou} className="vipIcon_jiantou" />
                                        </div>
                                        VIP
                                    </Col>
                                </Row>
                            </Col>
                            <Col span={14} className="info_right">
                                {/* 可用余额 */}
                            </Col>
                        </Row>
                        <Row className="num">
                            <Col span={12} className="userInfo_email">
                                {localStorage.getItem('email')}
                            </Col>
                            {/* <Col span={12} className="userInfo_money">
                                50000.00 USD
                            </Col> */}
                        </Row>
                        <Row className="userInfo_bottom">
                            <Col span={24} className="userInfo_title">
                                个人数据
                            </Col>
                            <Row className="userInfo_bottom_data" gutter={[0, 24]}>
                                <Col span={12} className="userInfo_bottom_item">
                                    <Row gutter={[8, 0]}>
                                        <Col span={5} className="bottom_item_img">
                                            <div className='img-home'>
                                            <img
                                                src={jyzl}
                                                className="bottom_item_chargeIcon"
                                            />
                                            </div>
                                           
                                        </Col>
                                        <Col span={19}>
                                            <div className="bottom_item_money">{trade.length ? trade[0].self_trade_volume : 0.00} BNB</div>
                                            <div className="bottom_item_title">交易总量</div>
                                        </Col>
                                    </Row>
                                </Col>
                                <Col span={12} className="userInfo_bottom_item"></Col>
                                <Col span={12} className="userInfo_bottom_item">
                                    <Row gutter={[8, 0]}>
                                        <Col span={5} className="bottom_item_img">
                                        <div className='img-home'>
                                            <img
                                                src={rfhd}
                                                className="bottom_item_chargeIcon"
                                            />
                                            </div>
                                        </Col>
                                        <Col span={19}>
                                            <div className="bottom_item_money">{trade.length ? trade[0].share_points : 0.00}</div>
                                            <div className="bottom_item_title">日分红点</div>
                                        </Col>
                                    </Row>
                                </Col>
                                <Col span={12} className="userInfo_bottom_item">
                                    <Row gutter={[8, 0]}>
                                        <Col span={5} className="bottom_item_img">
                                        <div className='img-home'>
                                            <img
                                                src={rfhjl}
                                                className="bottom_item_chargeIcon"
                                            />
                                            </div>
                                        </Col>
                                        <Col span={19}>
                                            <div className="bottom_item_money">{trade.length ? trade[0].share_reward : '0.00'} BNB</div>
                                            <div className="bottom_item_title">日分红奖励</div>
                                        </Col>
                                    </Row>
                                </Col>
                            </Row>
                        </Row>
                    </div>
                    <Row className="otherData" gutter={[8, 16]}>
                        <Col xs={12} md={8}>
                            <div className="otherData_item">
                                <img src={zjyl} className="otherData_item_img" />
                                <div className="otherData_item_right">
                                    <div className="otherData_item_rgTop">主交易量</div>
                                    <div className="otherData_item_rgbom">{trade.length ? trade[0].big_zone_volume : '0.00'} BNB</div>
                                </div>
                            </div>
                        </Col>
                        <Col xs={12} md={8}>
                            <div className="otherData_item">
                                <img src={fjyl} className="otherData_item_img" />
                                <div className="otherData_item_right">
                                    <div className="otherData_item_rgTop">副交易量</div>
                                    <div className="otherData_item_rgbom">{trade.length ? trade[0].small_zone_volume: '0.00'}</div>
                                </div>
                            </div>
                        </Col>
                        <Col xs={12} md={8}>
                            <div className="otherData_item">
                                <img src={sxfjl} className="otherData_item_img" />
                                <div className="otherData_item_right">
                                    <div className="otherData_item_rgTop">手续费奖励</div>
                                    <div className="otherData_item_rgbom">{reward.length ? reward[0].refer_reward : '0.00'}</div>
                                </div>
                            </div>
                        </Col>
                        <Col xs={12} md={8}>
                            <div className="otherData_item">
                                <img src={nftjl} className="otherData_item_img" />
                                <div className="otherData_item_right">
                                    <div className="otherData_item_rgTop">NFT奖励</div>
                                    <div className="otherData_item_rgbom">{reward.length ? reward[0].nft_reward : '0.00'}</div>
                                </div>
                            </div>
                        </Col>
                    </Row>
                    <div className="platformdata_title"> 平台数据 </div>
                    <div className="platformdata_data">
                         <div className='img-home'>
                                            <img
                                                src={qwfhzl}
                                                className="bottom_item_chargeIcon"
                                            />
                                            </div>
                        <div className="platformdata_data_right">
                            <div className="platformdata_data_top">{platformData.length ?platformData[0].total_reward : ''}</div>
                            <div className="platformdata_data_bottom">全网分红总量</div>
                        </div>
                    </div>
                    <div className="platformdata_data" style={{ margin: '20px 0' }}>
                         <div className='img-home'>
                                            <img
                                                src={fhdzl}
                                                className="bottom_item_chargeIcon"
                                            />
                                            </div>
                        <div className="platformdata_data_right">
                            <div className="platformdata_data_top">{platformData.length ? platformData[0].total_share_points : ''}</div>
                            <div className="platformdata_data_bottom">分红点总量</div>
                        </div>
                    </div>
                    <div className="platformdata_data">
                         <div className='img-home'>
                                            <img
                                                src={qwzjyl}
                                                className="bottom_item_chargeIcon"
                                            />
                                            </div>
                        <div className="platformdata_data_right">
                            <div className="platformdata_data_top">{platformData.length ? platformData[0].trade_volume : ''}</div>
                            <div className="platformdata_data_bottom">全网总交易量</div>
                        </div>
                    </div>
                </div>

                <div className="paymentTitle">工具栏</div>


                <Row className="paymentBox phone" gutter={[0, 16]}>
                    <div>
                    <Col className="paymentItem">
                        <div className="item" onClick={() => { toPage('/dashboard/NFT') }}>
                            <div className="item_img">
                                <img src={nftImg} alt="" />
                            </div>
                            <div className="item_text">NFT质押</div>
                        </div>
                    </Col>
                    <Col className="paymentItem">
                        <div className="item"  onClick={() => { toPage('/dashboard/OrderForm') }}>
                            <div className="item_img">
                                <img src={bill} alt="" />
                            </div>
                            <div className="item_text">订单</div>
                        </div>
                    </Col>
                    <Col className="paymentItem">
                        <div className="item">
                            <div className="item_img">
                                <img src={link} alt="" />
                            </div>
                            <div className="item_text">推荐</div>
                        </div>
                    </Col>
                    </div>
                    <div>

                    <Col className="paymentItem">
                        <div className="item">
                            <div className="item_img">
                                <img src={extract} alt="" />
                            </div>
                            <div className="item_text">提取</div>
                        </div>
                    </Col>
                    <Col className="paymentItem">
                        <div className="item">
                            <div className="item_img">
                                <img src={rankinglist} alt="" />
                            </div>
                            <div className="item_text">排行榜</div>
                        </div>
                    </Col>
                    <Col className="paymentItem" style={{opacity: 0}}>
                        <div className="item">
                            <div className="item_img">
                                <img src={moneyBag} alt="" />
                            </div>
                            <div className="item_text">钱包</div>
                        </div>
                    </Col>
                    </div>
                    
                </Row>
                <div className="you_invite_link">您的推荐链接</div>

                <div className="showLink">
                    <div className="link">https://turingbot.io</div>
                    <div className="copybtn" onClick={() => copyToClipboard('https://turingbot.io' + '/#/?code=' + referralCode)}>复制</div>
                </div>
                <div class="searchInput">
                    <p>绑定推荐码</p>
                    <Input
                        placeholder="Referral code"
                        suffix={<span style={
                            {
                                color: '#FA6944'
                            }
                        } onClick={() => bindingReferralCode()}>
                            绑定
                        </span>}
                        onChange={(e) => { setReferralCodeValue(e.target.value)}}
                        
                    />
                </div>
                <div class="referral">
                    <p class="ReferralCode">推荐识别代码</p>
                    <span class="copy-code" id="copyCode" data-clipboard-target="#inviteCode">
                        <span class="invite_code" id="inviteCode">{referralCode}</span>
                        <svg
                            onClick={() => {copyToClipboard(referralCode)}}
                            xmlns="http://www.w3.org/2000/svg"
                            width="18"
                            height="18" viewBox="0 0 17 17" fill="none">
                            <path
                                d="M12.0415 4.25H2.12484C1.73364 4.25 1.4165 4.50371 1.4165 4.81667V15.0167C1.4165 15.3296 1.73364 15.5833 2.12484 15.5833H12.0415C12.4327 15.5833 12.7498 15.3296 12.7498 15.0167V4.81667C12.7498 4.50371 12.4327 4.25 12.0415 4.25Z"
                                stroke="#999999" stroke-linejoin="round" />
                            <path
                                fill-rule="evenodd" clip-rule="evenodd"
                                d="M4.74755 1.997C4.74746 1.99699 4.74769 1.99623 4.74856 1.99478C4.74808 1.9963 4.74765 1.99702 4.74755 1.997ZM4.76981 1.97306C4.75871 1.98195 4.75287 1.9886 4.75 1.9926V3.54166H3.75V1.98332C3.75 1.29587 4.40087 0.916656 4.95833 0.916656H14.875C15.4325 0.916656 16.0833 1.29587 16.0833 1.98332V12.1833C16.0833 12.8708 15.4325 13.25 14.875 13.25H13.4583V12.25H14.875C14.965 12.25 15.03 12.2204 15.0635 12.1936C15.0746 12.1847 15.0805 12.178 15.0833 12.174V1.9926C15.0805 1.9886 15.0746 1.98195 15.0635 1.97306C15.03 1.94626 14.965 1.91666 14.875 1.91666H4.95833C4.86831 1.91666 4.80332 1.94626 4.76981 1.97306ZM15.0848 12.1719C15.0856 12.1704 15.0859 12.1697 15.0858 12.1696C15.0857 12.1696 15.0856 12.1698 15.0854 12.1703C15.0852 12.1706 15.085 12.1712 15.0848 12.1719ZM15.0858 1.997C15.0857 1.99702 15.0852 1.9963 15.0848 1.99478C15.0856 1.99623 15.0859 1.99699 15.0858 1.997Z"
                                fill="#999999" />
                        </svg>
                    </span>
                </div>
            </div>
        </>
    );
};

export default DashboardContent;
